import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
} from 'bizcharts';
import DataSet from '@antv/data-set';

// 数据源
const myData = {
  nodes: [
    {
      name: '环保指标消警次数',
    },
    {
      name: '炉温',
    },
    {
      name: '一氧化碳',
    },
    {
      name: '氢氧化物',
    },
    {
      name: '二氧化硫',
    },
    {
      name: '颗粒物',
    },
    {
      name: '氧化氢',
    },
  ],
  links: [
    {
      source: 0,
      target: 3,
      value: 6,
    },
    {
      source: 0,
      target: 4,
      value: 1,
    },
    {
      source: 5,
      target: 1,
      value: 1,
    },
    {
      source: 5,
      target: 2,
      value: 5,
    },
    {
      source: 5,
      target: 4,
      value: 1,
    },
    {
      source: 6,
      target: 1,
      value: 1,
    },
    {
      source: 6,
      target: 2,
      value: 1,
    },
    {
      source: 6,
      target: 3,
      value: 5,
    },
    {
      source: 6,
      target: 4,
      value: 1,
    },
  ],
};

export default function Sankeylayouts() {
  const [dataView, setDataView] = useState();
  const scale = {
    x: {
      sync: true,
    },
    y: {
      sync: true,
    },
  };

  useEffect(() => {
    setInit(myData);
  }, []);

  const setInit = data => {
    const ds = new DataSet();
    const dv = ds.createView().source(data, {
      type: 'graph',
      edges: d => d.links,
    });
    // diagram.sankey的配置项文档： https://g2.antv.vision/zh/docs/manual/dataset/transform#diagramsankey-%E6%A1%91%E5%9F%BA%E5%9B%BE
    dv.transform({
      type: 'diagram.sankey',
      nodeAlign: 'sankeyLeft', // sankeyLeft / sankeyRight / sankeyCenter
      sort: (a, b) => {
        console.log('a', a);
        console.log('b', b);
        if (a.index < b.index) {
          return 0;
        } else if (a.index > b.index) {
          return -1;
        }
        return 0;
      },
    });
    console.log('dataView', dv);

    setDataView(dv);
  };

  // edge view
  const edges =
    dataView &&
    dataView.edges.map(edge => {
      return {
        source: edge.source.name,
        target: edge.target.name,
        x: edge.x,
        y: edge.y,
        value: edge.value,
      };
    });

  // node view
  const nodes =
    dataView &&
    dataView.nodes.map(node => {
      return {
        x: node.x,
        y: node.y,
        name: node.name,
      };
    });

  return (
    <div>
      {dataView && (
        <Chart
          interactions={['element-highlight']}
          height={150}
          width={250}
          autoFit={true}
          scale={scale}
          padding={[20, 20, 40]}
        >
          <Legend visible={false} />
          <Tooltip showTitle={false} showMarkers={false} />
          <Axis name="x" visible={false} />
          <Axis name="y" visible={false} />
          <View padding={6} data={edges}>
            <Geom
              type="edge"
              position="x*y"
              shape="arc"
              color={[
                'source',
                source => {
                  // source 为data里面的参数key
                  if (source === '环保指标消警次数') return '#fae5a7';
                  else if (source === '炉温') return '#bed2fb';
                  else if (source === '颗粒物') return '#ebf1fd';
                  else if (source === '一氧化碳') return '#ebeef2';
                  else if (source === '氢氧化物') return '#f4fbf8';
                  else if (source === '氧化氢') return '#c1eedc';
                  else if (source === '二氧化硫') return '#bfc6d2';
                },
              ]}
              state={{
                default: {},
                active: {
                  style: { stroke: '#ccc', lineWidth: 1.5, strokeOpacity: 0.9 },
                },
              }}
              style={{ fillOpacity: 0.6 }}
              tooltip={[
                'target*source*value',
                (target, source, value) => {
                  return {
                    name: source + ' to ' + target + '</span>',
                    value,
                  };
                },
              ]}
            />
          </View>
          <View padding={6} data={dataView.nodes}>
            <Geom
              type="polygon"
              position="x*y"
              color={['name']}
              style={{
                stroke: '#ccc',
              }}
              state={{
                default: {},
                active: {
                  style: { stroke: '#000', lineWidth: 1.5, strokeOpacity: 0.9 },
                },
              }}
              label={[
                'name',
                {
                  offsetX: 10,
                  style: { fill: '#666', fontSize: '8', textAlign: 'center' },
                  // rotate: 0.1,
                  // textStyle: {
                  //   textAlign: 'center', // 文本对齐方向，可取值为： start center end
                  //   fill: '#666', // 文本的颜色
                  //   fontSize: '12', // 文本大小
                  //   // fontWeight: 'bold', // 文本粗细
                  //   // textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
                  // }
                },
              ]}
            ></Geom>
          </View>
        </Chart>
      )}
    </div>
  );
}
